<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../JavaScript/vue.js"></script>
<script>
    /*
     Vue.extend( options )
        参数：
        {Object} options
        用法:
            使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
            data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
    */

    /*
     Vue.component( id, [definition] )
        参数：
            {string} id
            {Function | Object} [definition]
        用法：
            注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
    */

    // 第一步创建组件
    // const School={} Vue.extend简写
    const School = Vue.extend({
        template:`
        <div class="schoolBox">
            <h1>学校名字：{{schoolName}}</h1>
            <h1>学校地址：{{schoolAddress}}</h1>
        </div>
        `,
        data(){
            return{schoolName:"尚硅谷", schoolAddress:"北京",}

        }
    })

    // 第一步创建组件
    const Student = Vue.extend({
        template:`
          <div class="studentBox">
              <h1>学生名字：{{studentName}}</h1>
              <h1>学生年龄：{{studentage}}</h1>
          </div>
        `,
        data(){
            return{studentName:"陶品奇", studentage:22,}

        }
    })

    const vm=new Vue({
        el:"#app",
        template:`
          <div class="app">
          <!--第三步使用组件-->
              <School></School>
              <hr/>
              <Student></Student>
          </div>`
        ,
        // 第二步注册组件
        components:{School, Student}
    })
</script>
</body>
</html>
